import { action } from 'mobx';
import { observer } from 'mobx-react-lite';
import './App.css';
import CartItem from './components/CartItem';

const App = (props) => {
  // console.log(props)
  const { store } = props
  const { currentWeight, current, ate, ateWeight, isPicking } = store

  const btnname = isPicking ? 'btn disabled' : 'btn'
  return (
    <div className="App">
      <h1>苹果篮子</h1>
      <div className="state">
        <div className="section">
          <span>当前</span>
          <div>{current.length}个苹果，{currentWeight}克</div>
        </div>
        <div className="section">
          <span>已吃掉</span>
          <div>{ate.length}个苹果，{ateWeight}克</div>
        </div>
      </div>
      <div className="apple-list">
        {
          current.length > 0 ?
            current.map(l => <CartItem apple={l} eatApple={action(id => store.eatApple(id))} key={l.id} />)
            : <div className="empty-tip">苹果篮子空空如也</div>
        }
      </div>
      <div className={btnname}>
        <button onClick={action(() => store.pickApple())}>
          { isPicking ? '正在采摘' : '摘苹果' }
        </button>
      </div>
    </div>
  );
}

export default observer(App);
